<style lang="less">
.tongxunlu_detail {
    padding-bottom: 50px;
	background: #f6f6f6;
    padding-bottom: 50px;
    height: calc(100% - 96px);
    width: 100%;
    position: absolute;
    .top_cont  {
        background: #fff;
        padding: 10px 0;
        .item.van-col{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 2;
            -ms-flex: 2;
            flex: 2;
            .adm {
                width: 55px;
                display: block;
                float: left;
                border-radius: 5px;
            }
            .con_r {
                text-align: left;
                margin-left: 20px;
                margin-top: 5px;
                .tit {
                    display: block;
                    color: #f4f7fe;
                    font-size: 16px;
                    text-align: left;
                    color: #333;
                    font-weight: bold;
                }
                .name {
                    font-size: 13px;
                    color: #20202D;
                }
            }
        }
	}
	.van-cell-group {
		margin-top: 15px;
		background: #f6f6f6;
        .van-cell {
            display: -webkit-box;
			font-size: 14px;
			&:nth-child(4){
				margin-top: 10px;
			}
            .van-cell__title {
                text-align-last: left;
				color: #141A20;
            }
            .van-cell__value {
                top: 16px;
                color: #BABBBD;
                font-size: 10px;
                position: static;
            }
            .text_right {
                float: right;
            }
            
        }
    }
}
</style>
<template>
	<mxq-router-layout>
		<div class="tongxunlu_detail">
			<Head slot="header" @headerClick="headerClick($event)">
				<div slot="headerTitle">
					人员详情
				</div>
				<div slot="headerRight">
					<i class="iconfont icon-shouye"/>
					<!-- <van-icon class="home" name="home"/> -->
				</div>
			</Head>
			<!-- 登录人信息 开始 -->
			<div class="top_cont">
				<van-row>
					<van-col span="22" offset="1" class="item">
						<van-col span="4">
							<img :src="userImage" alt="" class="adm">
						</van-col>
						<van-col class="con_r" span="20">
							<span class="tit">{{userName}}</span>
							<span class="name">{{userClass}}</span>
						</van-col>
					</van-col>
				</van-row>
			</div>
			
			<!-- 登录人信息 开始 -->
			<van-cell-group>
				<van-cell v-for="(item,index) in peopleMeg" :key="index">
					<template slot="title">
						<span class="van-cell-text">{{item.title}}</span>
						<span class="van-cell-text text_right">{{item.value}}</span>
					</template>
				</van-cell>
			</van-cell-group>
		</div>
	</mxq-router-layout>
</template>

<script>
import touXiang from '../../assets/img/index/touxiang.png'
import Head from '@/components/head';
import { callData, fileUrl } from '../../axios/axios'
import {
	Icon,
	Row,
	Col,
	Cell,
    CellGroup,
} from 'vant'

export default {
    name: 'tongxunluDetail',
    components: {
		Head,
		[Icon.name]: Icon,
		[Row.name]: Row,
		[Col.name]: Col,
		[Cell.name]: Cell,
        [CellGroup.name]: CellGroup
	},
	data() {
		return {
			userName: "管理员",
			userClass: "七工区",
			userImage: touXiang,
			query: this.$route.query,
			peopleMeg: []
		}
	},
	methods: {
		headerClick(e){
			this.$router.push({name:"index"})
		},
		getUserMeg(){
			let param = {},
				_this = this;
				param.id = this.query.userId
			callData('/userCenter/CmUser/getUserInfoById', 'get', param).then(res => {
				if(res.success){
					let data = res.data,
						listData = [
							{title:"联系电话",value:data.phone},
							{title:"所属工区",value:JSON.parse(res.data.showNameJson).gq},
							{title:"所属班组",value:JSON.parse(res.data.showNameJson).bz},
							{title:"职务",value:data.jobName},
							{title:"工作性质",value:data.workType}
						];
					_this.userImage = data.avatar ? fileUrl(data.avatar):touXiang
					_this.userName = data.realname
					_this.userClass = data.roleName
					_this.peopleMeg = listData
				}
			})
		}
	},
    mounted() {
        this.getUserMeg()
    }
}
</script>